<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>版主列表</title>
    <link rel="stylesheet" href="__LAYUI__/css/layui.css">
</head>

<body>
    <div class="layui-card">
        <div class="layui-card" style="margin-top: 15px;">
            <div class="layui-card-header">版主列表</div>
            <div class="layui-card-body">
                <!-- 搜索工具栏 -->
                <form class="layui-form layui-form-pane" id="searchForm">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">用户ID</label>
                            <div class="layui-input-inline">
                                <input type="number" name="user_id" placeholder="用户ID" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">分类ID</label>
                            <div class="layui-input-inline">
                                <input type="number" name="cate_id" placeholder="分类ID" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">状态</label>
                            <div class="layui-input-inline">
                                <select name="status">
                                    <option value="">全部</option>
                                    <option value="0">未使用</option>
                                    <option value="1">已使用</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn" lay-submit lay-filter="searchSubmit">搜索</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>

                <!-- 数据表格 -->
                <table id="test" lay-filter="test"></table>

                <!-- 表格工具栏 -->
                <script type="text/html" id="tableToolbar">
                    <div class="layui-btn-container">
                        <button class="layui-btn layui-btn-sm layui-bg-blue" lay-event="add">添加版主</button>
                    </div>
                </script>

                <script type="text/html" id="toolDemo">
                    <div class="layui-clear-space">
                      <a class="layui-btn layui-btn-xs layui-bg-blue" lay-event="edit">编辑</a>
                      <a class="layui-btn layui-btn-xs  layui-bg-red" lay-event="del">删除</a>
                      </a>
                    </div>
                  </script>

            </div>
        </div>
    </div>

    <script src="__LAYUI__/layui.js"></script>
    <script>
        layui.use(['form', 'table', 'layer', 'util'], function () {
            var form = layui.form,
                table = layui.table,
                layer = layui.layer,
                util = layui.util,
                $ = layui.$;


            // 初始化表格
            table.render({
                elem: '#test',
                url: '{:url("/admin/categoryAdmin/list")}', //后端接口URL
                parseData: function (res) {
                    return {
                        "code": 0, //解析接口状态
                        "msg": res.message, //解析提示文本
                        "count": res.data.total, //解析数据长度
                        "data": res.data.data//解析数据列表
                    };
                },
                toolbar: '#tableToolbar',
                defaultToolbar: ['filter', 'exports', 'print'],
                cols: [[
                    { type: 'checkbox' },
                    { field: 'id', title: 'ID', width: 80, sort: true },
                    { field: 'user_id', title: '用户ID', width: 180 },
                    { field: 'cate_id', title: '分类ID', width: 100 },
                    {
                        field: 'cateInfo', title: '分类名称', width: 100, templet: function (d) {
                            if (d.cateInfo) {
                                return d.cateInfo.cate_name
                            } else {
                                return '分类已被删除'
                            }
                        }
                    },
                    { field: 'status', title: '状态', width: 100 },
                    {
                        field: 'create_time', title: '创建时间', width: 160, templet: function (d) {
                            return util.toDateString(d.create_time * 1000);
                        }
                    },
                    { fixed: 'right', title: '操作', width: 134, minWidth: 125, templet: '#toolDemo' }
                ]],
                page: true,
                limit: 20,
                limits: [20, 50, 100]
            });

            // 监听工具栏事件
            table.on('toolbar(test)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                var data = checkStatus.data;

                switch (obj.event) {

                    case 'add':
                        layer.open({
                            title: '添加版主',
                            type: 2,
                            area: ['80%', '80%'],
                            content: '/admin/categoryAdmin/add'
                        });
                        break
                    case 'delete':
                        if (data.length === 0) {
                            layer.msg('请选择要删除的数据');
                            return;
                        }
                        var ids = data.map(item => item.id).join(',');
                        layer.confirm('确定删除选中的版主吗?', function (index) {
                            $.get('/admin/fake/del', { id: ids }, (res) => {
                                if (res.code == 200) {
                                    table.reload('test');
                                    layer.msg('删除成功');
                                } else {
                                    layer.msg('删除失败');
                                }
                            });
                        });
                        break;
                }
            });

            // 监听搜索提交
            form.on('submit(searchSubmit)', function (data) {
                table.reload('test', {
                    where: data.field,
                    page: {
                        curr: 1
                    }
                });
                return false;
            });
            table.on('tool(test)', function (obj) {
                var data = obj.data;
                if (obj.event === 'edit') {
                    layer.open({
                        title: '编辑版主' + data.id,
                        type: 2,
                        area: ['80%', '80%'],
                        content: '/admin/categoryAdmin/edit/?id=' + data.id
                    });
                }
                else if (obj.event === 'del') {
                    layer.confirm('确定删除版主 [' + data.userInfo.nickname + '] 吗?', function (index) {
                        $.get('/admin/categoryAdmin/del', { id: data.id }, (res) => {
                            if (res.code == 200) {
                                obj.del(); // 删除对应行（tr）的DOM结构
                                layer.close(index);
                                layer.msg('删除成功')
                            } else {
                                layer.msg('删除失败')
                            }
                        })

                        // 向服务端发送删除指令
                    });
                }
                else if (obj.event === 'more') {
                    dropdown.render({
                        elem: this,
                        show: true,
                        data: [{
                            title: '查看',
                            id: 'detail'
                        }, {
                            title: '删除',
                            id: 'del'
                        }],
                        click: function (menudata) {
                            if (menudata.id === 'detail') {
                                layer.open({
                                    title: '查看文章',
                                    type: 2,
                                    area: ['80%', '80%'],
                                    content: '/admin/article/read?id=' + data.id
                                });
                            } else if (menudata.id === 'del') {
                                layer.confirm('确定删除文章 [' + data.title + '] 吗?', function (index) {
                                    $.get('/admin/article/del', { id: data.id }, (res) => {
                                        if (res.code == 200) {
                                            obj.del(); // 删除对应行（tr）的DOM结构
                                            layer.close(index);
                                            layer.msg('删除成功')
                                        } else {
                                            layer.msg('删除失败')
                                        }
                                    })

                                    // 向服务端发送删除指令
                                });
                            }
                        },
                        id: 'dropdown-table-tool',
                        align: 'right', // 右对齐弹出
                        style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式
                    });
                }
            });
            // 监听版主生成提交
            form.on('submit(cardSubmit)', function (data) {
                layer.load();
                $.ajax({
                    url: '{:url("card/generate")}',
                    type: 'POST',
                    data: data.field,
                    success: function (res) {
                        layer.closeAll('loading');
                        if (res.code == 0) {
                            layer.msg('生成成功', { icon: 1 });
                            table.reload('test');
                            // 重置表单
                            $('form[lay-filter="cardForm"]')[0].reset();
                            form.render();
                        } else {
                            layer.msg(res.msg, { icon: 2 });
                        }
                    },
                    error: function () {
                        layer.closeAll('loading');
                        layer.msg('服务器错误', { icon: 2 });
                    }
                });
                return false;
            });
        });
    </script>
</body>

</html>